<template>
  <div class="container">
    <div class="theTop">
      <img src="http://course.myhope365.com/img/logo-header.08ec1297.png" alt="">
      <div class="nav">
        <span>首页</span>
        <a-dropdown class="list">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            课程分类 <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item><a href="javascript:;">学长面对面</a></a-menu-item>
            <a-menu-item><a href="javascript:;">职业素养必修课</a></a-menu-item>
            <a-menu-item><a href="javascript:;">大数据</a></a-menu-item>
            <a-menu-item><a href="javascript:;">WEB前端</a></a-menu-item>
            <a-menu-item><a href="javascript:;">数据库</a></a-menu-item>
            <a-menu-item><a href="javascript:;">网络爬虫</a></a-menu-item>
            <a-menu-item><a href="javascript:;">求职技巧</a></a-menu-item>
            <a-menu-item><a href="javascript:;">项目实战</a></a-menu-item>
          </a-menu>
        </a-dropdown>
        <span>专属课程</span>
      </div>
      <input type="text" placeholder="搜索课程">
      <span><a-icon type="search" />搜索</span>
      <div class="car">

        <div class="shopping" v-if="!$store.state.isLogin" >
          <router-link to="/shopping"><a-icon type="shopping-cart" /></router-link> |
          <a type="primary" @click="showLog" style="background:#fff;outline: none;border: none">
            <van-icon name="shopping-cart-o" size="20"/>
            <span style="color: #aaa">登录/注册</span>
            <a-icon type="user"/>
          </a>
        </div>
        <div class="shopping" v-else>
          <router-link to="/shopping"><van-icon name="shopping-cart-o" size="20"/></router-link>
          <a-dropdown >
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              <span> {{ $store.state.userContent.nickname}}</span>
              <img  class="logo" :src="$store.state.userContent.avatarUrl" alt="">
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;">个人中心</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">我的课程</a>
              </a-menu-item>
              <a-menu-item>
                <a href="./shopCar">我的订单</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="logOut">退出登录</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

        </div>
        <view1></view1>

      </div>
    </div>
  </div>
</template>

<script>
import view1 from "@/components/view";
export default {
  name: "MyHeader2",
  data() {
    return {
      // visible: false,
    };
  },
  methods: {
    showLog(){
      this.$store.commit("changeMT", true)
    },
    logOut(){
      this.$message.success('退出成功');
      this.$store.dispatch("logout")
    }

  },
  components:{
    view1
  }
}
</script>

<style scoped lang="less">

.container {
  width: 1200px;
  height: 80px;
  margin: 0 auto;
  .theTop {
    display: flex;
    align-items: center;
    height: 80px;
    img {
      height: 55px;
      margin-right: 30px;
    }
    .nav{
      width: 50%;
    }
    input {
      height: 40px;
      width: 50%;
      box-sizing: border-box;
      border: 1px solid #bab8b8;
      padding: 5px 10px;
      outline: none;
      border-radius: 20px 0 0 20px;
      border-right: none;
    }
    input:hover {
      box-shadow: 0 0 5px aquamarine;
    }
    >span {
      width: 12%;
      height: 40px;
      padding: 0 15px;
      line-height: 40px;
      display: inline-block;
      cursor: pointer;
      color: white;
      background-color: rgb(0, 207, 140);
      border-radius: 0 20px 20px 0;
      i {
        font-size: 17px;
        margin-right: 5px;
        margin-bottom: -5px;
      }
    }
    .car {
      width: 50%;
      margin-left: 50px;
      cursor: pointer;
      i:nth-of-type(1) {
        font-size: 20px;
        color: gray;
      }
      i:nth-of-type(2) {
        background-color: #c1c1c1;
        padding: 8px;
        border-radius: 50%;
        margin-left: 5px;
      }
    }
  }
}
.nav {
  margin-right: 50px;
  span {
    margin-right: 20px;
    color: black;
    padding-bottom: 3px;
  }
  span:hover {
    color: #00d086;
  }
  span:nth-of-type(2){
    margin-left: 20px;
  }
  i {
    margin-left: 2px;
  }
  .list {
    color: black;
  }
  .list:hover {
    color: #00d086;
  }
}
.table {
  width: 400px;
  height: 300px;
  button{
    width: 100px;
    height: 30px;
    background: #00d086;
    margin-top: 40px;
    margin-left: 150px;
  }

  nav{
    display: flex;
    margin-top: 10px;
    justify-content: space-around;
  }
}
/deep/.ant-modal-footer{
  display: none;
}
.login ,
.login1{
  padding: 0 20px ;
  width: 300px;
  margin:20px auto;
  height: 30px;
  border: 1px solid black;
  input{
    outline: none;
    border: none;
    margin-left: 10px;

  }
}
.login1{
  width: 234px;

  input{
    width: 150px;
  }
}
.loginP{
  width: 300px;
  display: flex;
  margin: auto;
  div:nth-child(2){
    height: 26px;
    padding: 2px;
    font-size: 12px;
    margin-top: 22px;
    background: #00d086;
    color: white;
  }
}
/deep/.logo {
  width: 16%;
}
</style>